<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<div class="pageheader">
    <h2><i class="fa fa-cubes"></i> Grids </h2>
    <div class="breadcrumb-wrapper hidden-xs">
      <span class="label">You are here:</span>
      <ol class="breadcrumb">
        <li>
          <a href="index.html">
            Home
          </a>
        </li>
        <li class="active"> Grids </li>
      </ol>
    </div>
  </div>

<div class="page">
        <div class="panel-body">
            <div class="grid-structure">
               <div class="row">
                 <div class="col-lg-12">
                    <h4 class="nm pv-15">Base on <strong> Bootstrap grid system </strong></h4>
                 </div>
                 <div class="col-lg-12">
                    <div class="panel panel-default">
                     <div class="panel-body">col-lg-12</div>
                    </div>
                 </div>
               </div>
               <div class="row">
                  <div class="col-lg-6">
                    <div class="panel panel-default">
                     <div class="panel-body">col-lg-6</div>
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="panel panel-default">
                     <div class="panel-body">col-lg-6</div>
                    </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-lg-4">
                    <div class="panel panel-default">
                     <div class="panel-body">col-lg-4</div>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="panel panel-default">
                     <div class="panel-body">col-lg-4</div>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="panel panel-default">
                     <div class="panel-body">col-lg-4</div>
                    </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-lg-3">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-3</div>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-3</div>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-3</div>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-3</div>
                    </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-lg-2">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-2</div>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-2</div>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-2</div>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-2</div>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-2</div>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-2</div>
                    </div>
                  </div>
               </div>

               <div class="row">
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-1</div>
                    </div>
                  </div>
               </div>

               <div class="row">
                  <div class="col-lg-12">
                    <h4 class="nm pv-15"> Bootstrap grid <strong> for Mobile, tablet and desktop </strong></h4>
                  </div>
               </div>

               <div class="row">
                 <div class="col-lg-4">
                   <div class="row">
                     <div class="col-xs-6">
                       <div class="panel panel-default">
                         <div class="panel-body">col-xs-6</div>
                       </div>
                     </div>
                     <div class="col-xs-6">
                       <div class="panel panel-default">
                         <div class="panel-body">col-xs-6</div>
                       </div>
                     </div>
                   </div>
                 </div>            
                 <div class="col-lg-8">
                   <div class="row">
                    <div class="panel panel-default">
                       <div class="panel-body">col-lg-8</div>
                    </div>
                   </div>
                 </div>                 
               </div>

               <div class="row">
                  <div class="col-lg-6">
                     <div class="row">
                        <div class="col-sm-6">
                           <div class="panel panel-default">
                              <div class="panel-body">col-sm-6</div>
                           </div>
                        </div>
                        <div class="col-sm-6">
                           <div class="panel panel-default">
                              <div class="panel-body">col-sm-6</div>
                           </div>
                        </div>
                     </div>
                   </div>
                  <div class="col-lg-6">
                    <div class="row">
                       <div class="panel panel-default">
                           <div class="panel-body">col-lg-6</div>
                       </div>
                    </div>
                  </div>
               </div>

               <div class="row">               
                  <div class="col-sm-6">
                     <div class="panel panel-default">
                         <div class="panel-body">col-sm-6</div>
                     </div>
                  </div>
                  
                  <div class="col-sm-6">
                     <div class="panel panel-default">
                         <div class="panel-body">col-sm-6</div>
                     </div>
                  </div>                  
               </div>

               <div class="row">               
                  <div class="col-md-8">
                     <div class="panel panel-default">
                         <div class="panel-body">col-md-8</div>
                     </div>
                  </div>
                  
                  <div class="col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-md-4</div>
                     </div>
                  </div>                  
               </div>

               <div class="row">               
                  <div class="col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-md-4</div>
                     </div>
                  </div>
                  
                  <div class="col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-md-4</div>
                     </div>
                  </div>                  

                  <div class="col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-md-4</div>
                     </div>
                  </div>                  
               </div>

               <div class="row">               
                  <div class="col-md-6">
                     <div class="panel panel-default">
                         <div class="panel-body">col-md-6</div>
                     </div>
                  </div>                  
                  
                  <div class="col-md-6">
                     <div class="panel panel-default">
                         <div class="panel-body">col-md-6</div>
                     </div>
                  </div>                  
               </div>

               <div class="row">               
                  <div class="col-xs-12 col-sm-6 col-md-8">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-12 col-sm-6 col-md-8</div>
                     </div>
                  </div>
                  
                  <div class="col-xs-6 col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6 col-md-4</div>
                     </div>
                  </div>
               </div>

               <div class="row">               
                  <div class="col-xs-6 col-sm-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6 col-sm-4</div>
                     </div>
                  </div>
                  
                  <div class="col-xs-6 col-sm-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6 col-sm-4</div>
                     </div>
                  </div>

                  <div class="col-xs-6 col-sm-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6 col-sm-4</div>
                     </div>
                  </div>
               </div>
                                                            

               <div class="row">
                  <div class="col-lg-12">
                    <h4 class="nm pv-15"> Bootstrap grid for <strong> Mobile and desktop </strong></h4>
                  </div>
               </div>

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
               <div class="row">               
                  <div class="col-xs-12 col-md-8">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-12 col-md-8</div>
                     </div>
                  </div>
                  
                  <div class="col-xs-6 col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6 col-md-4</div>
                     </div>
                  </div>
               </div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
               <div class="row">               
                  <div class="col-xs-6 col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6 col-md-4</div>
                     </div>
                  </div>
                  
                  <div class="col-xs-6 col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6 col-md-4</div>
                     </div>
                  </div>

                  <div class="col-xs-6 col-md-4">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6 col-md-4</div>
                     </div>
                  </div>
               </div>

<!-- Columns are always 50% wide, on mobile and desktop -->
               <div class="row">               
                  <div class="col-xs-6">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6</div>
                     </div>
                  </div>
                  
                  <div class="col-xs-6">
                     <div class="panel panel-default">
                         <div class="panel-body">col-xs-6</div>
                     </div>
                  </div>
               </div>
            </div>
        </div>
</div>